import createEle from "./creatEle";

export default function patchVNode (oldVnode, newVnode) {
    if (oldVnode === newVnode) {
        return
    }
    if (newVnode.text != undefined && (newVnode.children == undefined || newVnode.children.length == 0)) {
        // 新节点有text属性（没有chlidren）
        if (newVnode.text != oldVnode) {
            oldVnode.elm.innerText = newVnode.text
        }
    } else {
        // 新节点没有text属性(有children)
        if (oldVnode.children != undefined && oldVnode.children.length > 0) {
            // 新创建的节点应该插在所有未处理的节点之前，而不是所有已处理的节点之后
            let unIndex = 0
            for (let i = 0; i < newVnode.children.length; i++) {
                const nEle = newVnode.children[i];
                let isExist = false
                for (let j = 0; j < oldVnode.children.length; j++) {
                    const oEle = oldVnode.children[j];
                    if (oEle.sel === nEle.sel && oEle.key == nEle.key) {
                        isExist = true
                    }
                }
                if (!isExist) {
                    // 旧节点中没有的节点进行创建然后进行插入或者追加
                    console.log(newVnode.children[i], i)
                    let dom = createEle(nEle)
                    nEle.elm = dom
                    // 如果旧节点的标记位已经下移到最后，则在后面进行追加DOM，否则在标记位前进行插入DOM
                    if (unIndex < oldVnode.children.length.length) {
                        oldVnode.elm.insertBefore(dom, oldVnode.children[unIndex].elm)                        
                    } else {
                        oldVnode.elm.appendChild(dom)
                    }
                } else {
                    // 存在的话，则将旧节点的标记位下移
                    unIndex++
                    if (i != j) {
                        
                    } else {

                    }
                }
            }
        } else {
            oldVnode.elm.innerText = ''
            for (let i = 0; i < newVnode.children.length; i++) {
                const element = newVnode.children[i];
                oldVnode.elm.appendChild(element)                    
            }
        }
    }
}